<template>
  <!-- 选择图片弹框 -->
    <el-dialog
        class="selectPic"
        :title="$t('goods.picture')"
        :visible.sync="visibleModel"
        @close="close"
        width="1080px">
        <div class="selectPicBody">
            <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="$t('goods.localServer')" name="first">
                <div class="searchRow">
                <el-select v-model="checkYear" :placeholder="$t('goods.pleaseChoose')">
                    <el-option :label="$t('goods.unlimitedYear')" value="0"> </el-option>
                    <el-option
                      v-for="(item,index) in yearsArray"
                      :key="index"
                      :label="item"
                      :value="item">
                    </el-option>
                </el-select>
                <el-select v-model="checkMonth" :placeholder="$t('goods.pleaseChoose')">
                    <el-option :label="$t('goods.unlimitedMonth')" value="0"> </el-option>
                    <el-option
                    v-for="(item,index) in monthArray"
                    :key="index"
                    :label="item"
                    :value="item">
                    </el-option>
                </el-select>
                <el-button type="primary" icon="el-icon-search" @click="searchImgArr">{{$t('common.search')}}</el-button>
                <div class="fr">
                    <el-button type="danger" @click="delImg">{{$t('common.del')}}</el-button>
                    <el-upload
                    class="upload-demo"
                    action="http://admin-api.zntrade.cn/service/basic/images/fileUpload" multiple
                    :on-success="onSuccess"
                    accept="image/*"
                    :limit="3">
                    <el-button size="small" type="primary">{{$t('goods.uploadPictures')}}</el-button>
                    </el-upload>
                </div>
                </div>
                <div class="uploadBlock">
                <div class="uploadImg" v-for="(item,index) in imgArr" :key="index" v-bind:style="{backgroundImage:'url('+item.path+')'}" @click="checkImg(item.id)" @mouseenter="imgHover(item.id,true)" @mouseleave="imgHover(item.id,false)">
                    <div class="name">{{item.path}}</div>
                    <div class="mask"  v-show="item.isSelect"><i class="el-icon-check"></i></div>
                    <div class="del" v-show="item.isHover" @click.stop="delPersonalPic(item.id)"><i class="el-icon-delete"></i></div>
                </div>
                </div>
                <el-checkbox v-model="allChecked" @change="isCheckAll">{{$t('goods.allElection')}}</el-checkbox>
            </el-tab-pane>
            <el-tab-pane :label="$t('goods.exNetPic')" name="second">
                <div class="extractNetPic">
                <p>{{$t('goods.inputPicLink')}}</p>
                <el-input class="inputlink" :placeholder="$t('goods.picLink')"/>
                <p><el-button type="info" plain>{{$t('goods.conversion')}}</el-button></p>
                </div>
            </el-tab-pane>
            </el-tabs>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visibleModel = false">{{$t('common.cancel')}}</el-button>
            <el-button type="primary" @click="confirmModel">{{$t('common.confirm')}}</el-button>
        </span>
    </el-dialog>
</template>

<script>
import uploadPic from "@/api/uploadPic.service.js";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visibleModel: false,
      allChecked: false, // 是否全选图片
      imgArr: [], // 获取图片数据
      checkMonth: this.$t('goods.unlimitedMonth'), // 月份值
      monthArray: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // 月份下拉框
      checkYear: this.$t('goods.unlimitedYear'), // 年份值
      yearsArray: [2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010], // 年份下拉框
      activeName: "first" // tab默认
    };
  },
  mounted() {
    this.visibleModel = this.dialogVisible;
    this.getImgArr("");
    
  },
  watch: {
    dialogVisible(val) {
      this.visibleModel = val;
    }
  },
  methods: {
    // 确定关闭
    confirmModel() {
      this.visibleModel = false;
      let arr = [];
      this.imgArr.forEach(i => {
        if (i.isSelect) {
          arr.push(i);
        }
      });
      this.$emit("uploadArr", arr);
    },
    // 关闭回调
    close() {
      this.$emit("visible", false);
    },
    // 图片上传成功
    onSuccess(res, file) {
      this.searchImgArr();
    },
    // 删除图片
    delImg() {
      for (let i = 0; i < this.imgArr.length; i++) {
        if (this.imgArr[i].isSelect) {
          this.delPersonalPic(this.imgArr[i].id);
        }
      }
    },
    // 删除单个图片
    async delPersonalPic(id) {
      await uploadPic
        .delImg(id)
        .then(res => {
          this.$message({ type: "success", message: this.$t('goods.operateSucccess') });
        })
        .catch(err => {
          //
        });
      this.searchImgArr();
    },
    // 查询图片列表
    searchImgArr() {
      let key = this.checkYear + "-" + this.checkMonth;
      this.getImgArr(key);
    },
    // 获取图片列表
    getImgArr(key) {
      uploadPic
        .getImgArr({ keywords: key, pageNo: 1, pageSize: 10 })
        .then(res => {
          if (res.code == 200) {
            this.imgArr = res.values;
            this.imgArr.forEach(i => {
              this.$set(i, "isSelect", false);
              this.$set(i, "isHover", false);
              // i.isSelect = false
              // i.isHover = false
            });
          } else {
            this.$message({
              message: res.msg,
              type: "warning"
            });
          }
        });
    },
    // 是否全选图片
    isCheckAll(flag) {
      for (let i = 0; i < this.imgArr.length; i++) {
        this.imgArr[i].isSelect = flag;
      }
    },
    // 选中图片
    checkImg(id) {
      for (let i = 0; i < this.imgArr.length; i++) {
        if (this.imgArr[i].id == id) {
          this.imgArr[i].isSelect = !this.imgArr[i].isSelect;
          return;
        }
      }
    },
    // 图片hover事件
    imgHover(id, flag) {
      for (let i = 0; i < this.imgArr.length; i++) {
        if (this.imgArr[i].id == id) {
          this.imgArr[i].isHover = flag;
          return;
        }
      }
    },
    // tab切换
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<style>
.fr .upload-demo .el-upload-list {
  display: none;
}
.fr .upload-demo {
  display: inline-block;
}
.extractNetPic {
  padding: 30px 0 50px;
  text-align: center;
}
.extractNetPic p {
  font-size: 18px;
}
.extractNetPic .inputlink {
  margin: 0 auto;
}
.extractNetPic .inputlink input {
  text-align: center;
}
.uploadImg .el-icon-delete:before {
  font-size: 20px;
  color: #fff;
}
.uploadImg .del {
  position: absolute;
  width: 34px;
  line-height: 34px;
  text-align: center;
  background-color: #428bca;
  cursor: pointer;
  bottom: 0;
  right: 0;
  z-index: 6;
}
.uploadImg:hover {
  border: 2px solid #428bca;
}
.uploadImg .mask .wi {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.uploadImg .mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
}
.uploadImg .el-icon-check {
  content: "\e6da";
  color: #fff;
  font-size: 32px;
  position: relative;
  top: calc(50% - 16px);
}
.uploadImg .name {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  line-height: 34px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 0 20px;
  text-align: left;
  z-index: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.uploadImg {
  flex: none;
  position: relative;
  width: calc(20% - 20px);
  margin: 10px;
  text-align: center;
  vertical-align: middle;
  background-color: #eee;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  height: 192px;
  cursor: pointer;
}
.uploadBlock {
  padding: 10px 10px 41px;
  flex-wrap: wrap;
  margin-left: 0;
  max-height: 460px;
  overflow-y: auto;
  display: flex;
  display: -webkit-flex;
}
.selectPic .el-dialog__header {
  background-color: #f4f5f9;
}
.selectPic .el-dialog__footer {
  background-color: #f4f5f9;
  text-align: center;
}
.selectPic .el-dialog__body {
  padding-top: 0;
}
.searchRow .el-input {
  width: auto !important;
}
.searchRow .fr {
  float: right;
}
.v-add-wrapper .el-tabs__header {
  margin-bottom: 10px !important;
}
</style>
